<template>
	<div class="setting">
		<div class="header-bar" v-show="false">
			<div class="iconfont" @click="goBack">&#xe624;</div>
			店铺认领
		</div>
		<div class="warrp" id="avatar-con">			
			<div class="avatar">
				<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick()">
					<img class="avatar-img" v-if="lenImg0 === 0" :src="avatar"/>
					<img class="avatar-img" v-if="imgU0" id="showImg" :src="imgU0" />								
					<input type="file" accept="image/*,type/face" @change="onFileChange0" style="display:none;" id="upfile0">
				</div>		
				<!--<div class="desc">点击修改店铺头像</div>-->
			</div>
			<div class="bg-img">
				<img :src="avatar" height="100%" width="100%" alt="" />				
			</div>
			<div class="drop"></div>
		</div>
		<div class="content">
			<group label-width="5.5em" label-margin-right="2em" >
				<x-input :disabled="true" title="商店名称" v-model="shopName"></x-input>
				<popup-picker value-text-align="left" title="服务范围" :data="storeCates" v-model="activityType"></popup-picker>
				<popup-picker value-text-align="left" title="城市区域" :data="areaArr" v-model="area"></popup-picker>
		    	<x-input title="详细地址" :disabled="true" type="text" v-model="detailAddress"></x-input>
		    	<x-input title="您的姓名" type="text" :is-type="'china-name'" v-model="userName" placeholder="请输入您身份证上的姓名"></x-input>
		    	<x-input @on-blur="idCardVaild" :min="15" :max="18" :is-type="this.valiCardId" title="身份证号码" v-model="idCard" placeholder="请输入您的身份证号码"></x-input>
		    </group>
		    <div class="id-cart vux-1px-b">
		    	<div class="left">身份证(正面)</div>
		    	<div class="right">
		    		<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(1)">
		    			<div class="desc iconfont" v-if="lenImg1 === 0">&#xe601;</div>
		    			<div class="uploading" v-show="loadingUp1"><spinner :type="'ios'"></spinner></div>
						<img v-if="imgU1" id="showImg" :src="imgU1" />								
						<input type="file" accept="image/*,mode/camera,type/cid_front" @change="onFileChange1" style="display:none;" id="upfile1">
					</div>
		    	</div>
		    </div>
		    <div class="id-cart vux-1px-b">
		    	<div class="left">身份证(反面)</div>
		    	<div class="right">
		    		<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(2)">
		    			<div class="desc iconfont" v-if="lenImg2 === 0">&#xe601;</div>
		    			<div class="uploading" v-show="loadingUp2"><spinner :type="'ios'"></spinner></div>
						<img v-if="imgU2" id="showImg" :src="imgU2" />								
						<input type="file" accept="image/*,mode/camera,type/cid_back" @change="onFileChange2" style="display:none;" id="upfile2">
					</div>
		    	</div>
		    </div>
		    <div class="id-cart">
		    	<div class="left">营业执照原件</div>
		    	<div class="right">
		    		<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(3)">
		    			<div class="desc iconfont" v-if="lenImg3 === 0">&#xe601;</div>
		    			<div class="uploading" v-show="loadingUp3"><spinner :type="'ios'"></spinner></div>
						<img v-if="imgU3" id="showImg" :src="imgU3" />								
						<input type="file" accept="image/*,mode/camera,type/company" @change="onFileChange3" style="display:none;" id="upfile3">
					</div>
		    	</div>
		    </div>
		    <group label-width="5.5em" label-margin-right="2em" >
		    	<x-input title="手机号码" type="text" v-model="phone" :min="11" :max="11" placeholder="请输入11位本人手机号码"></x-input>
		    	<x-input title="获取验证码" type="text" :show-clear="false" class="weui-vcode" v-model="validateCode">
        			<div class="vali-code vux-1px-l" slot="right" @click="getPhone">获取验证码</div>
      			</x-input>
      			<x-switch title="是否支持外卖" v-model="isTake"></x-switch>
      			<div class="id-cart vux-1px-t" v-show="isTake">
			    	<div class="left">餐饮许可证</div>
			    	<div class="right">
			    		<div class="upload_imgs" id="uploadImgs" @click.stop="autoClick(4)">
			    			<div class="desc iconfont" v-if="lenImg3 === 0">&#xe601;</div>
			    			<div class="uploading" v-show="loadingUp4"><spinner :type="'ios'"></spinner></div>
							<img v-if="imgU4" id="showImg" :src="imgU4" />								
							<input type="file" accept="image/*,mode/camera,type/company" @change="onFileChange4" style="display:none;" id="upfile4">
						</div>
			    	</div>
		   		</div>
      			<x-textarea title="商店介绍" :max="200" v-model="shopIntroduce"></x-textarea>
	    	</group>
	    	<a href="https://www.mofing.com/utils/docs/content/10401.html">
	    		<div class="agreement">点击下一步代表您同意 <span class="point">&lt;&lt;阿宝商户入住协议&gt;&gt;</span></div>
	    	</a>
	    	<div class="btn" @click="submitForm">下一步</div>
	    	<div class="bottom-bar"></div>
		</div>
	</div>
</template>

<script>
	import { getUrlParam }  from '@/assets/js/getUrlParam'
	import { iosOrAndr }  from '@/assets/js/isIos'
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { PopupRadio , Spinner , GroupTitle, Group, Cell, XInput, Selector, PopupPicker, XButton, XNumber, ChinaAddressV4Data, XAddress, XTextarea, XSwitch } from 'vux'
	export default{
		name : "setting",
		data(){
			return{
				list1:[['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你']],
				avatar   : '',
				isWeChat : true,
				shopName :'',		//商店名称
				activityType : ['请选择服务范围'],
				area         : ['请选择区县'],
				activityOptions:['1','2','3'],
				detailAddress : '', //详细地址
				userName : '', 	//用户姓名
				idCard : '', 		//身份证号码
				inviteCode : '', //邀请码
				phone : '', 	//手机号码
				validateCode : '', 	//验证码
				isTake : false, 	//是否支持外卖
				shopIntroduce : '',//商店介绍
				lenImg0	: 0,
				lenImg1 : 0,
				lenImg2	: 0,
				lenImg3 : 0,
				lenImg4 : 0,
				imgU0   : '',
				imgU1   : '',
				imgU2   : '',
				imgU3   : '',
				imgU4   : '',
				okUrl0   : '',
				okUrl1   : '',
				okUrl2   : '',
				okUrl3   : '',
				okUrl4   : '',
				storeInfo    : {},	//商业的商店信息
				storeCate    : {},	//服务范围
				timer        : null,
				loadingUp1   : false,
				loadingUp2   : false,
				loadingUp3   : false,
				loadingUp4   : false,
				sysType   	 : '',
				result       : '',
				comefrom     : '',
				shopid       : '',
				areaList     : [],	//区县List
				areaId       : '' //区县ID
			}
		},
		mounted(){
			document.title = '店铺认领'
			//调用获取服务范围的方法
			this.userinfo = this.getParams()
			this.sysType = iosOrAndr()
			this.fuid = getUrlParam('fuid') || this.$route.query.fuid
			this.isWeixin()
			window.cameraResult = this.cameraResult
			this.getStoreCate()
			//获取上个页面的数据			
			this.shopid = this.$route.query.shop_id
			if(!this.shopid){
				this.getArea()
				this.storeInfo = JSON.parse(localStorage.getItem('avatar'))
				let store = this.storeInfo
				this.avatar 	   = store.frontImg || ''
				this.shopName 	   = store.name
				this.detailAddress = store.address
			}else{
				this.getStoreInfo()
			}	

		},
		methods:{
			//获取市区
			getArea(){
				let id = this.$route.query.cityId
				if(!id){
					id = getUrlParam('city')
				}
				this.$axiosGet('/utils/region/city.json',{id:id},true).then( res => {
					if(res.code === 200){
						this.areaList = res.data
					}
				})
			},
			//返回上一页
			goBack(){
				if(this.shopid){
					this.$closeWin()
				}else{
					this.$router.go(-1)
				}
				
			},
			//获取店铺信息
			getStoreInfo(){
				let info = {
					userinfo : this.getParams(),
					shop_id  : this.shopid
				}
				this.$axiosGet('/api/store/getStoreInfo',{
					data : JSON.stringify(info)
				}).then( res => {
					if(res.code === 200){
						this.storeInfo = res.data
						this.avatar 	   = this.storeInfo.frontImg
						this.shopName 	   = this.storeInfo.name
						this.detailAddress = this.storeInfo.address
						this.areaList      = this.storeInfo.area_arr
					}
					if(res.code === 404){
						this.$vux.toast.text('店铺不存在')
					}
				})
			},
			//提交表单数据
			submitForm(){
				let catId  = ''
				for(let item in this.storeCate){
					if(this.activityType[0] === this.storeCate[item]){
						catId = item
					}
				}
				let cityId = this.$route.query.cityId
				let shopInfo = {
					userinfo     : this.userinfo,
					storeName    : this.shopName,
					store_id	 : this.storeInfo.id,
					city	     : cityId || this.storeInfo.regionId,
					privonce	 : '',			//之前的值this.storeInfo.province
					catName 	 : this.activityType,
					area         : this.areaId,
					address		 : this.detailAddress,
					userName     : this.userName,
					scardid      : this.idCard,
					storeAvatar	 : this.okUrl0 || this.storeInfo.frontImg,
					licencePath	 : this.okUrl3,
					foodLicencePath	: this.okUrl4,
					scard_1		 : this.okUrl1,
					scard_2		 : this.okUrl2,
					isWaimai	 : this.isTake === true ? 1 : 0,
					//proxyUid     : this.inviteCode,
					phone        : this.phone,
					validateCode : this.validateCode,
					shopIntroduce: this.shopIntroduce,
					catId        : catId,
					comefrom     : this.comefrom
				}
				console.log(shopInfo)
				let result = this.validateForm()
				if(result.status){
					//存在fuid
					//if(this.fuid && this.fuid != '0'){
						shopInfo.fuid = this.fuid 
						this.$axiosPost('/api/Store/getStore',{
							data : JSON.stringify(shopInfo)
						}).then(res => {
							if(res.code === 200){
								setCookie('claimSt',this.storeInfo.id)
								this.$router.replace({path:'/examine',query:{status:0,fromin:'setting'}})
							}
						})
					//}
					//不存在fuid
//					if(!this.fuid || this.fuid == '0'){
//						sessionStorage.setItem('shopInfo',JSON.stringify(shopInfo))
//						this.$router.replace({path:'/queryServerNum',query:{status:this.storeInfo.id,fromin:'setting'}})
//					}
				}else{
					this.$vux.toast.text(result.msg, 'top')
				}
			},
			//回填之前提交的数据
//			getBackInfo(){
//				let info = JSON.parse(localStorage.getItem('backfill'))
//					if(info){
//						this.okUrl1   = info.storeAvatar
//						this.shopName = info.storeName
//						this.activityType = info.cateName
//						this.catId        = info.catId
//						this.detailAddress = info.address
//						this.idCard   = info.scardid
//						this.userName = info.uname
//						this.imgU1    = info.scard_1
//						this.imgU2    = info.scard_1
//						
//						this.okUrl2   = info.scard_1
//						this.okUrl4   = info.bank_licence
//					    this.okUrl5   = info.represent_idcart
//						this.okUrl3   = info.licencePath
//					    
//						this.userName = info.uname
//						this.idCard   = info.scardid
//						this.phone    = info.phone
//						this.avatar   = info.storeAvatar
//						this.imgU1    = info.scard_1
//						this.imgU2    = info.licencePath
//						this.imgU3    = info.bank_licence
//						this.imgU4    = info.represent_idcard
//					}
//			},
			//验证身份证号
			valiCardId(){
				let result = {
					valid : false,
					msg   : ''
				}
				if(!/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/.test(this.idCard)){
					result.msg = '请输入正确的身份证号'
					return result
				}
				result.valid = true
				return result
			},
			//获取URL的参数
			getParams(){
				let userinfo = {
					uid   : getUrlParam('uid')   || getCookie('uid'),
					token : getUrlParam('token') || getCookie('token')
				}
				return userinfo
			},
			//获取手机验证码
			getPhone(e){
				let time = 60
				if(this.phone.length !== 11){
					this.$vux.toast.text('请输入11位手机号码','top')
					return
				}
				if(e.target.innerText !== '获取验证码'){
					return
				}
				if(this.timer){
					clearInterval(this.timer)
				}				
				if(e.target.innerText === '获取验证码'){
					this.timer = setInterval(()=>{
						e.target.innerText = --time
						if(e.target.innerText === '0'){
							e.target.innerText = '获取验证码'
							clearInterval(this.timer)
						}
					},1000)					
					this.$axiosPostno('/utils/sms/sendcode.json',{
							phone : this.phone,
							type  : 7						
					}).then( res => {
						
					})

				}					
			},
			//获取服务范围
			getStoreCate(){
				let info = {
					userinfo : this.getParams()
				}
				this.$axiosPost('/api/store/getStoreCate',{
					data : JSON.stringify(info)
				}).then( res => {
					if(res){
						this.storeCate = res
					}else{
						this.$vux.toast.text('数据加载失败','top')
					}
				})
			},
			cameraResult(type,fullPath,path){	
				if(type){
					if(type === 'face'){
						this.avatar = fullPath
						this.okUrl0 = path
					}
					if(type === 'cid_front'){
						this.imgU1 = fullPath
						this.okUrl1 = path
					}
					if(type === 'cid_back'){
						this.imgU2 = fullPath
						this.okUrl2 = path
					}
					if(type === 'company'){
						this.imgU3 = fullPath
						this.okUrl3 = path
					}
					if(type === 'food_licence'){
						this.imgU4 = fullPath
						this.okUrl4 = path
					}
				}
			},
			autoClick(index) {
				if(!this.isWeChat){
					if(index === 0){
						let type = [ 'camera','album']
						this.getWxUpId("avatar","okUrl"+index,type)
					}else{
						let type = ['camera']
						this.getWxUpId("imgU"+index,"okUrl"+index,type)
					}
					return
				}
				if(this.sysType === 'ios' && this.isWeChat){
					this.iosUpload(index)
					return
				}				
				if(index === 0){
					document.getElementById("upfile0").click();
				}else if(index === 1){
					document.getElementById("upfile1").click();	
				}else if(index === 2){
					document.getElementById("upfile2").click();	
				}else if(index === 3){
					document.getElementById("upfile3").click();	
				}else if(index === 4){
					document.getElementById("upfile4").click();	
				}
			},
			getWxUpId(name,okName,type){
				let _this = this
				this.$wxUploadImg({count: 1,sourceType:type},
				function(localId){
					_this[name] = localId;
				},function(data,localId){
					_this[okName] = data.url;//data.fullurl;
				});
			},
			iosUpload(index){
				if(index === 0){
					window.webkit.messageHandlers.MofingWKWebview.postMessage({type:'face'})
				}
				if(index === 1){
					window.webkit.messageHandlers.MofingWKWebview.postMessage({type:'cid_front'})
				}
				if(index === 2){
					window.webkit.messageHandlers.MofingWKWebview.postMessage({type:'cid_back'})
				}
				if(index === 3){
					window.webkit.messageHandlers.MofingWKWebview.postMessage({type:'company'})
				}
				if(index === 4){
					window.webkit.messageHandlers.MofingWKWebview.postMessage({type:'food_licence'})
				}
			},
			//上传文件
			onFileChange0($event,index) {		
				let self = this;
				this.$vux.loading.show({text:'上传中'})
				this.lenImg0 = $event.target.files.length;
				if(this.lenImg0 === 0) {
					return;
				}		
				let fileArr = $event.target.files;
				var file=fileArr[0];
				var reader = new FileReader();				                       		                       
		            reader.onload = function (e) {	
		            	self.imgU0 = e.target.result;
				        	self.$axiosPostno('/utils/files/uploadbase64.json',{
				    			upload : self.imgU0
					        }).then(res=>{
					        	self.$vux.loading.hide()
					        	if(res.code === 200){
					        		self.okUrl0 = res.data.path
					        		self.avatar = res.data.fullpath
					        	}
					        })
			        }
		            reader.readAsDataURL(file);
			},
			//上传文件
			onFileChange1($event,index) {		
				let self = this;
				this.$vux.loading.show({text:'上传中'})
				this.lenImg1 = $event.target.files.length;
				if(this.lenImg1 === 0) {
					return;
				}		
				let fileArr = $event.target.files;
				var file=fileArr[0];
				var reader = new FileReader();				                       		                       
		            reader.onload = function (e) {	
		            	self.imgU1 = e.target.result;
				        	self.$axiosPostno('/utils/files/uploadbase64.json',{
				    			upload :  self.imgU1
					        }).then(res=>{
					        	self.$vux.loading.hide()
					        	if(res.code === 200){
					        		self.okUrl1 = res.data.path
					        	}
					        })
		            }
		            reader.readAsDataURL(file);
			},
			//上传文件
			onFileChange2($event,index) {		
				let self = this;
				this.$vux.loading.show({text:'上传中'})
				this.lenImg2 = $event.target.files.length;
				if(this.lenImg2 === 0) {
					return;
				}		
				let fileArr = $event.target.files;
				var file=fileArr[0];
				var reader = new FileReader();				                       		                       
		            reader.onload = function (e) {	
		            	self.imgU2 = e.target.result;
				        	self.$axiosPostno('/utils/files/uploadbase64.json',{
				    			upload : self.imgU2
					        }).then(res=>{
					        	self.$vux.loading.hide()
					        	if(res.code === 200){
					        		self.okUrl2 = res.data.path
					        	}
					        })
		            }
		            reader.readAsDataURL(file);
			},
			//上传文件
			onFileChange3($event,index) {		
				let self = this;
				this.$vux.loading.show({text:'上传中'})
				this.lenImg3 = $event.target.files.length;
				if(this.lenImg3 === 0) {
					return;
				}		
				let fileArr = $event.target.files;
				var file=fileArr[0];
				var reader = new FileReader();				                       		                       
		            reader.onload = function (e) {	
		            	self.imgU3 = e.target.result;
				        	self.$axiosPostno('/utils/files/uploadbase64.json',{
				    			upload : self.imgU3
					        }).then(res=>{
					        	self.$vux.loading.hide()
					        	if(res.code === 200){
					        		self.okUrl3 = res.data.path
					        	}
					        })
		            }
		            reader.readAsDataURL(file);
			},
			onFileChange4($event,index) {		
				let self = this;
				this.$vux.loading.show({text:'上传中'})
				this.lenImg4 = $event.target.files.length;
				if(this.lenImg4 === 0) {
					return;
				}		
				let fileArr = $event.target.files;
				var file=fileArr[0];
				var reader = new FileReader();				                       		                       
		            reader.onload = function (e) {	
		            	self.imgU4 = e.target.result;	
				        	self.$axiosPostno('/utils/files/uploadbase64.json',{
				    			upload : self.imgU4
					        }).then(res=>{
					        	self.$vux.loading.hide()
					        	if(res.code === 200){
					        		self.okUrl4 = res.data.path
					        	}
					        })
		            }
		            reader.readAsDataURL(file);
			},
			idCardVaild(){
				let result = ''
				let codeinfo = {
					userinfo : this.getParams(),
					idCardVaild : this.idCard
				}
				if(this.idCard){
					this.$axiosPost('/api/Store/idCardVaild',{
						data : JSON.stringify(codeinfo)
					}).then( res => {
						if(res.status === 0){
							this.$vux.toast.text(res.msg,'top')
							this.result = false
							return
						}
						if(res.status === 1){
							this.result = true
						}
						
					})
				}
			},
			//表单验证
			validateForm(){
				let result = {
					status : false,
					msg    : ''
				}
				if(!this.shopName){
					result.msg = '请填写商店名称'
					return result
				}
				if(this.activityType[0] === '请选择服务范围'){
					result.msg = '请选择服务范围'
					return result
				}
				if(this.area[0] === '请选择区县'){
					result.msg = '请选择区县'
					return result
				}
				if(!this.detailAddress){
					result.msg = '请填写详细地址'
					return result
				}
				if(!this.userName){
					result.msg = '请填写您的姓名'
					return result
				}
				if(!this.result){
					result.msg = '请输入正确的身份证号'
					return result
				}
				if(!this.imgU1){
					result.msg = '请上传您本人身份证照正面'
					return result
				}
				if(!this.imgU2){
					result.msg = '请上传您本人身份证照反面'
					return result
				}
				if(!this.imgU3){
					result.msg = '请上传您的营业执照'
					return result
				}
				if(this.phone.length < 11){
					result.msg = '请输入11位手机号码'
					return result
				}
				if(!this.validateCode){
					result.msg = '请输入验证码'
					return result
				}
				if(!this.resultVCode){
					result.msg = '请输入正确的验证码'
					return result
				}
				if(this.isTake){
					if(!this.imgU4){
						result.msg = '请上传您的餐饮许可证'
						return result
					}
				}
				result.status = true
				return result
			},
			isWeixin(){
				let agent = navigator.userAgent.toLowerCase();
			    if (agent.match(/MicroMessenger/i) == "micromessenger") {
			       	this.isWeChat = false
			       	this.$wxConfig()
			       	this.comefrom  = 2
			       	document.title = '店铺认领'
			       	document.getElementById('avatar-con').style.margin = 0
			    } else {
			    	this.comefrom  = 1
			        this.isWeChat = true
			    }
			},
		},
		watch:{
			validateCode(){
				if(this.validateCode.length === 6 && this.phone){
//					let os = ''
//					if(this.sysType === 'ios'){
//						os = '1'
//					}else if(this.sysType === 'android'){
//						os = '2'
//					}else{
//						os = '0'
//					}
					let codeinfo = {
						userinfo : this.getParams(),
						phone : this.phone,
						code  : this.validateCode
						//os    : os
					}
					this.$axiosPost('/api/store/smsVaild',{
						data : JSON.stringify(codeinfo)
					}).then( res => {
						if(res.status == 0){
							this.$vux.toast.text(res.msg,'top')
							this.resultVCode = false
						}
						if(res.status == 1){
							this.userinfo.uid   = res.uid,
							this.userinfo.token = res.token
							this.resultVCode = true
						}
					})
				}
			},
			area(){
				this.areaList.forEach( item => {
					if(item.name === this.area[0]){
						this.areaId = item.id
					}
				})
			}
		},
		computed:{
			storeCates(){
				let cates = []
				if(this.storeCate){
					for(let item in this.storeCate){
						cates.push(this.storeCate[item])
					}
					return [cates]
				}
			},
			areaArr(){
				let arr = []
				if(this.areaList){
					this.areaList.forEach( item => {
						arr.push(item.name)
					})
					return [arr]
				}
			}
		},
		components:{
			Group,
	        GroupTitle,
	        Cell,
	        XInput,
	        Selector,
	        PopupPicker,
	        XAddress,
	        XNumber,
	        XTextarea,
	        XSwitch,
	        PopupRadio,
	        XButton,
	        Spinner
		}
	}
</script>

<style lang="less" scoped>
	@import '~vux/src/styles/1px.less';
	.setting /deep/ .weui-cells{
		margin-top: 0;
	}
	.setting /deep/ .weui-label{
		white-space: nowrap;
	}
	.setting /deep/ .weui-btn{	
		background:#ff1351;
	}
	.setting /deep/ .weui-switch{
		background:#ff1351 ;
	}
	.setting /deep/ .weui-switch:checked{
		border-color:#ff1351;
	}
	.setting /deep/ .weui-input{
		font-size: .24rem;
	}

	.setting /deep/ .vux-popup-picker-value{
		font-size: .24rem;
	}

	.setting{
		text-align: left;
		background: #fff;
		.header-bar{
			position:fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 199;
			height:1.44rem;
			line-height:2rem;
			text-align:center;
			font-size:.34rem;
			background:#f7f7f8;
			color:#000;
			.iconfont{
				position: absolute;
				left: 0;
				top: .54rem;
				height: .9rem;
				line-height: .9rem;
				padding: 0 .2rem;
			}
		}
		.warrp{
			position: relative;
			overflow:hidden;
/*			margin-top: 1.44rem;*/
			width:100%;
			height: 4.6rem;
			.avatar{
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -1rem;
				margin-left: -1rem;
				z-index: 99;
				height: 2rem;
				width: 2rem;
				border: 1px solid #fff;
				border-radius: 50%;
				.upload_imgs{
					width: 100%;	
					height: 100%;							
					display: flex;
					flex-flow: wrap;				
					align-items: center;	
					position: relative;
					img{
						height: 100%;
						width: 100%;
						border-radius: 50%;
					}	
				}
				.desc{
					width: 100%;
					line-height: .5rem;
					text-align: center;
					z-index: 100;
					color: #fff;
					font-size: .2rem;
				}
			}
			.bg-img{
				z-index: -100;
				width: 100%;
				height: 100%;
				filter: blur(.2rem);
			}	
			.drop{
				position: absolute;
				left: 0;
				top: 0;
				z-index: 50;
				height: 100%;
				width: 100%;
				background: rgba(255,255,255,.2);
			}		
		}
		.agreement{
			padding: 0 .3rem;
			line-height: 1rem;
			.point{
				color: #d49931;
			}
		}
		.vali-code{
			width: 1.4rem;
			padding-left: .2rem;
			text-align: center;
			font-size: .24rem;
			color: #ff1351;
		}
		.id-cart{
			position: relative;
			display: flex;
			padding: .2rem .3rem;
			height: .1.2rem;	
			line-height: 1.2rem;
			font-size: .34rem;	
			.left{
				height: .88rem;
				white-space: nowrap;
				width: 1.88rem;
				height: 100%;				
				margin-right: .68rem;				
			}
			.right{
				position: relative;
				flex: 1;				
				font-size: .28rem;
				color: #757575;
				text-align: right;	
				.upload_imgs {
					position: absolute;
					right: 0;
					width: 60%;	
					height: 1.2rem;								
					border: 1px dashed #ccc;
					border-radius: .15rem;
					display: flex;
					flex-flow: wrap;				
					align-items: center;		
					.desc{
						width: 100%;
						font-size: .4rem;
						text-align: center;
					}
					.uploading{
						z-index: 150;
						position: absolute;
						right: 40%;
						top: -.2rem;
					}		
					#showImg {					
						width: 60%;
						height: 1rem;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
					}
				}
			}
		}
		.btn{
			margin: 0 auto;
			width: 90%;
			height: .8rem;
			line-height: .8rem;
			text-align: center;
			background: #ff1351;
			color: #fff;
			border-radius: .1rem;
		}
		.bottom-bar{
			height: .3rem;
			background: #fff;
		}
	}
</style>